<script setup lang="ts">
import { useRouter } from 'vue-router'
import { pageArchive } from '@/api/article'
import { ArchiveVo } from '@/api/article/type'
import { getConvertMDDate } from '@/utils/dateUtil'

const router = useRouter()
// 展示归档列表
const dataList = ref(<ArchiveVo[]>[])
// 总数
const total = ref(<number>0)
// 点击的 archive index列表
const clickArchiveIdx = ref(<Array<number>>[])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})

const { queryParams } = toRefs(data)

/** 查询归档列表 */
function getList() {
  pageArchive(queryParams.value).then(({ data: response }) => {
    dataList.value = response.data.records
    total.value = response.data.total
  })
}

// 页面跳转
function getArticleId(id: any) {
  router.push({ path: `/article/${id}` })
}

const handleSizeChange = (val: number) => {
  queryParams.value.pageNum = val
  getList()
}

const handleCurrentChange = (val: number) => {
  queryParams.value.pageNum = val
  getList()
}

const clickArchive = (archiveIdx: number) => {
  const idx = clickArchiveIdx.value.findIndex((i) => archiveIdx == i)
  if (idx >= 0) {
    // 移除
    clickArchiveIdx.value.splice(idx, 1)
  } else {
    clickArchiveIdx.value.push(archiveIdx)
  }
}

const isShowArticles = (articleIdx: number): boolean => {
  return clickArchiveIdx.value.includes(articleIdx)
}

onMounted(() => {
  getList()
})
</script>

<template>
  <CommonContainerTemplate>
    <template #default>
      <h1 class="flex-center"><svg-icon icon-class="time-dark"></svg-icon> 归档</h1>
      <el-card class="box-card" shadow="hover">
        <ul class="timeline-wrapper">
          <li v-for="(archive, index) in dataList" :key="index" class="timeline-item">
            <div class="timeline-box">
              <div class="out-circle">
                <div class="in-circle"></div>
              </div>
              <div class="long-line"></div>
            </div>
            <div class="timeline-content">
              <div class="timeline-date" @click="clickArchive(index)">
                <span class="timeline-date-left">{{ archive.formatDate }}</span>
                <span class="timeline-date-right">
                  <svg-icon v-if="isShowArticles(index)" icon-class="arrow-up" />
                  <svg-icon v-else icon-class="arrow-down" />
                </span>
              </div>
              <div class="timeline-info" :class="isShowArticles(index) ? 'info-show' : 'info-hide'">
                <div v-for="(article, index) in archive.archives" :key="index" class="info-group">
                  <span>{{ getConvertMDDate(article.createTime) + '：' }}</span>
                  <el-link @click="getArticleId(article.id)">
                    <span class="text-show">{{ article.title }}</span>
                  </el-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <el-pagination
          style="justify-content: center"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </template>
  </CommonContainerTemplate>
</template>

<style scoped>
.box-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}
.timeline-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  .timeline-item {
    list-style-type: none;
    height: auto;
    position: relative;
    .timeline-box {
      text-align: center;
      position: absolute;
      height: 100%;
      .out-circle {
        width: 16px;
        height: 16px;
        background: #0e74da1a;
        box-shadow: 0 4px 12px #0000001a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        position: relative;
        top: 7px;
        .in-circle {
          width: 10px;
          height: 10px;
          margin: 0 auto;
          background: #3a8ee6;
          border-radius: 50%;
          box-shadow: 0 4px 12px #0000001a;
        }
      }
      .long-line {
        width: 5px;
        height: 100%;
        background: #3a8ee6;
        box-shadow: 0 4px 12px #0000001a;
        opacity: 0.1;
        margin-left: 5px;
      }
    }
    .timeline-content {
      box-sizing: border-box;
      margin-left: 20px;
      height: auto;
      padding: 0 0 0 20px;
      text-align: left;

      .timeline-date {
        font-size: 14px;
        color: #3a8ee6;
        font-weight: 500;
        margin-bottom: 16px;
        background-color: #f2f6fc;
        display: block;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        &::before {
          content: '';
          width: 0;
          height: 0;
          border-width: 10px 10px 10px 0;
          border-style: solid;
          border-color: transparent #f2f6fc transparent transparent;
          position: relative;
          display: inline-block;
          left: -8px;
          top: 5px;
        }
        .timeline-date-left {
          padding-left: 10px;
        }
        .timeline-date-right {
          float: right;
          padding-right: 10px;
        }
      }
      .timeline-info {
        overflow: hidden;
        transition: height 0.3s ease 0s;

        .info-group {
          display: flex;
          justify-content: start;
          padding: 10px;
          font-size: 14px;
          border-bottom: 1px dashed #dbdde0;
        }
      }
      .info-hide {
        height: 0;
      }
      .info-show {
        height: 100%;
      }
    }
  }
}
</style>
